<template>
  <div class="company-info-wrapper">
    <div
      class="money-wrapper"
      :style="{ background: 'url(' + bg1 + ') no-repeat' }"
    >
      <div>
        <h1>资产总额：</h1>
        <span class="money">{{ closeEye ? "****" : balance }}</span
        >&nbsp;&nbsp;元&nbsp;&nbsp;
        <span
          class="iconfont"
          @click="changeEye"
          :class="closeEye ? 'iconeye1' : 'iconeye'"
          style="font-size: 1.8rem"
        ></span>
      </div>
      <div class="btn-wrapper">
        <a-button
          :disabled="checkStatus === '5' ? false : true"
          style="margin-right: 2rem"
          type="primary"
          @click="$commonJs.goPage('withdrawPage')"
          >提现</a-button
        >
        <a-button
          type="primary"
          :disabled="checkStatus === '5' ? false : true"
          @click="$commonJs.goPage('rechargePage')"
          >充值</a-button
        >
      </div>
    </div>
    <div class="company-wrapper">
      <div v-if="checkStatus === '0'">
        <div class="notice">
          <span class="iconfont iconlaba"></span>您的公司信息还未审核，请<a
            href="javaScript:(0)"
            @click="$commonJs.goPage('companyInfoForm')"
            >完善信息提交审核<span class="iconfont iconshuangjiantouyou"></span
          ></a>
        </div>
        <div class="empty-wrapper">
          <img src="@/assets/image/empty.png" alt="" />
        </div>
      </div>
      <div v-else-if="checkStatus === '1' || checkStatus === '2'">
        <div class="notice border">
          <span class="iconfont iconlaba"></span>您的公司信息
          <span class="text-primary">正在审核中</span>
        </div>
        <div class="info">
          <company-info-form :formData="formData"></company-info-form>
        </div>
      </div>
      <div v-else-if="checkStatus === '3' || checkStatus === '4'">
        <div class="notice">
          <span class="iconfont iconlaba"></span>您的公司信息由于'{{
            formData.msg
          }}'的原因审核不通过,请重新<a
            href="javaScript:(0)"
            @click="$commonJs.goPage('companyInfoForm')"
            >完善信息提交审核<span class="iconfont iconshuangjiantouyou"></span
          ></a>
        </div>
        <div class="empty-wrapper">
          <img src="@/assets/image/stop.png" alt="" />
        </div>
      </div>
      <div v-else>
        <div class="info">
          <company-info-form :formData="formData"></company-info-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bg1 from "@/assets/image/bg1.jpg";
import "@/assets/fonticon/iconfont.css";
export default {
  name: "mobile",
  components: {
    companyInfoForm: () => import("@/components/companyInfo/disabledForm")
  },
  data() {
    return {
      timer: null,
      bg1: Bg1,
      formData: {
        company_name: "",
        company_intro: "",
        mobile: "",
        base_bank_name: "",
        base_count: "",
        legal_person: "",
        legal_person_id_card: "",
        business_license: "",
        legal_person_id_front: "",
        legal_person_id_back: "",
        company_count: "",
        msg: ""
      }
    };
  },
  methods: {
    changeEye() {
      this.$store.dispatch("changeCloseEye", !this.closeEye);
    },
    getInfo() {
      this.$ajax
        .post(this.$api.getCompanyList)
        .then(res => {
          let status = res.data.status;
          this.$store.dispatch("changeCheckStatus", status.toString());
          this.$store.dispatch("changeValidateMobile", res.data.safemobile);
          if (this.checkStatus === "5" && !this.validateMobile) {
            this.$router.push({ name: "authentication" });
          }
          this.formData = JSON.parse(JSON.stringify(res.data));
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    this.$commonJs.getBalanceApi();
    this.timer = setInterval(() => {
      this.$commonJs.getBalanceApi();
    }, 10000);
    this.getInfo();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  computed: {
    checkStatus() {
      return this.$store.state.checkStatus;
    },
    balance() {
      return this.$store.state.balance;
    },
    closeEye() {
      return this.$store.state.closeEye;
    },
    validateMobile() {
      return this.$store.state.validateMobile;
    }
  }
};
</script>

<style scoped lang="less">
.company-info-wrapper {
  padding: 0 !important;
  border-radius: 0;
  background: @backGroundColor !important;
  .money-wrapper {
    padding: 4rem 5rem;
    border-radius: 0.2rem;
    margin-bottom: 2rem;
    height: 13.19rem;
    .flex_content();
    .flex_justify_space();
    align-items: flex-end;
    font-size: 1.5rem;
    h1 {
      font-size: 1.5rem;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-bottom: 1.5rem;
    }
    .money {
      font-size: 2.19rem;
      font-family: Century751BT-SemiBold;
      font-weight: normal;
      color: @primary-color;
    }
  }
  .company-wrapper {
    background: @white;
    border-radius: 1rem;
    padding: 2.625rem 5rem;
    .notice {
      font-size: 1.3rem;
      font-family: MicrosoftYaHei;
      letter-spacing: 0.1rem;
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      > .iconfont {
        display: inline-block;
        margin-right: 1rem;
        font-size: 1.5rem;
        color: @primary-color;
        font-weight: normal;
      }
    }
    .border {
      padding-bottom: 2.625rem;
      border-bottom: 2px solid rgba(218, 218, 218, 1);
    }
    .empty-wrapper {
      margin: 8rem 0;
      text-align: center;
    }
  }
}
.ant-alert {
  font-size: 18px;
}
</style>
